use "document.body.clientWidth" and "document.body.clientHeight"
code:
<div>
<p> use "document.body.clientWidth" and "document.body.clientHeight"</p>
<div><img id="imgTag" src="../images/car2.jpg" alt="car" title="photo"
width="100%" height="auto"/> </div>
</div>
<script>
function scaleSize(){
document.getElementById("imgTag").style.width = document.body.clientWidth;
document.getElementById("imgTag").style.height = document.body.clientHeight;
}
scaleSize();
</script>
code:
<div>
<p class="spec">The resizing task takes two functions,
which can be inserted directly into the HTML source <br>
with <script> tags or into a standalone JS file.</p>
<img id="zoom_img" src="../images/car2.jpg" alt="car" title="car" width="50%"
height="auto"/><br>
<button type="button" onclick="zoomin()"><img src="../images/zoom-in.png"
alt="" title="photo" style="width: 1vw; height: 1vw;">zoom in</button>
<button type="button" onclick="zoomout()"><img src="../images/zoom-out.jpg"
alt="" title="photo" style="width: 1vw; height: 1vw;">zoom out</button>
</div>
<script>
function zoomin(){
var myImg = document.getElementById("zoom_img");
var currWidth = myImg.clientWidth;
if(currWidth >= 700){
alert("You're fully zoomed in!");
} else{
myImg.style.width = (currWidth + 100) + "px";
}
}
function zoomout(){
var myImg_1 = document.getElementById("zoom_img");
var currWidth_1 = myImg_1.clientWidth;
if(currWidth_1 <= 100){
alert("That's as small as it gets.");
} else{
myImg_1.style.width = (currWidth_1 - 100) + "px";
}
}
</script>
the combination of HTML, CSS, and JavaScript makes cool stuff possible : click and see image scaling
<div>
<p class="spec">the combination of HTML, CSS, and JavaScript makes cool stuff possible :
<span> click and see image scaling</span></p>
<div class="photo-container">
<img class="photo" src="../images/car2.jpg" alt="car"/>
<img class="photo" src="../images/cartoon.jpg" alt="cartoon"/>
<img class="photo" src="../images/desk.jpeg" alt="desk"/>
<img class="photo" src="../images/camera.png" alt="camera"/>
</div>
</div>
<style>
.photo-container{display: flex; flex-flow: row wrap;}
.photo-container img {width: 20vw; height: 20vw; border: 0.2vw outset burlywood;
margin-top: 3vw; margin-right: 3vw; cursor: pointer}
span{color: red;}
.scaleImage { animation: scaling-image-animation 5s ease;}
@keyframes scaling-image-animation {
0% { transform: scale(0.5); opacity: 0.8;}
50% {transform: scale(2); }
100% { transform: scale(2.5); transform: rotate(0.5turn);}
}
</style>
<script>
const photos = Array.from(document.querySelectorAll('.photo'));
const scalingImage = (currentPhoto => {
currentPhoto.classList.add("scaleImage");
setTimeout(() => {
currentPhoto.classList.remove('scaleImage');
}, 4500);
})
photos.map((photo) => {
photo.addEventListener('click', Event => {
scalingImage(Event.target);
})
});
</script>
